<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$msg.title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
</head>
<link href="__CDN__/assets/css/frontend.css?v=1627711211" rel="stylesheet">
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<!--引入 element-ui 的样式-->
<link rel="stylesheet" type="text/css" href="__CDN__/assets/js/vue/index.css">
<link rel="stylesheet" type="text/css" href="__CDN__/assets/js/vue/vant.css">
<!-- 引入vue  -->
<script src="__CDN__/assets/js/vue/vue.js"></script>
<!-- 引入element 组件库-->
<script src="__CDN__/assets/js/vue/index.js"></script>
<script src="__CDN__/assets/js/vue/vant.min.js"></script>
<!--swiper  -->
<link href="__CDN__/assets/libs/swiper-6.4.15/swiper-bundle.min.css" rel="stylesheet"> 
<script src="__CDN__/assets/libs/swiper-6.4.15/swiper-bundle.min.js"></script>
<body onload="document.getElementById('music_image').click();">
    <div id="app" style="height: 100%;width: 100%;display: none;">
        <!-- <van-image
        width="100%"
        height="100%"
        fit="cover"
        :src="globalData.bg_image"
        ></van-image> -->
        <audio id="music" loop preload autoplay :src="globalData.bg_music"></audio>
        <a href="javascript:" id="music_image"><img style="margin-top: 5px;" src="__CDN__/assets/img/luckily/music.png" width="50px" height="auto" id="music_btn" border="0" onclick="playPause()"></a>
        
        <!-- 规则按钮 -->
        <div id="rule" v-if="!rule.show" @click="seeRule">规则说明</div>
        <!-- 活动规则弹窗 -->
        <van-dialog v-model="rule.show" title="活动规则" confirm-button-text="确定">
            <div style="height: 60vh;overflow: auto;">
                <div style="padding: 10px;background-color: #f7f8fa;">
                    {$msg.desc}
                </div>
                <van-image
                width="100%"
                height="99%"
                fit="contain"
                :src="globalData.rule_image"
                ></van-image>
            </div>
        </van-dialog>

        <div style="width: 100%;height: 100%;overflow:auto;position: fixed;top: 0;left: 0;display: flex;flex-direction: column;justify-content: center;background-color: #000;">
            <!-- 砸金蛋活动 -->
            <div id="golden-egg" v-if="globalData.type == '砸金蛋'" style="color: #fff;">
                <van-image
                v-if="globalData.bg_image"
                style="height: 100%;"
                :src="globalData.bg_image"
                ></van-image>
                <van-image
                v-else
                style="height: 100%;"
                src="__CDN__/assets/img/luckily/golden-egg/bj2.jpg"
                ></van-image>
                <div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;">
                    <div class="main-view">
                        <div class="tip">
                            抽奖次数:<span class="num">{{luck_num}}</span>次
                        </div>
                        <div class="egg-list">
                            <div class="egg" v-for="i in 9" :key="'egg_'+i" :style="{'z-index':i}">
                                <img class="egg-img img1" src="__CDN__/assets/img/luckily/golden-egg/jd.png" alt="">
                                <img class="egg-img img2" style="display: none;" src="__CDN__/assets/img/luckily/golden-egg/jd2.png" alt="">
                                <div class="ribbon">
                                    <img class="r3"src="__CDN__/assets/img/luckily/golden-egg/cd.gif">
                                </div>
                                <div class="hammer">
                                    <img style="height: 100%;" src="__CDN__/assets/img/luckily/golden-egg/cz.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 宝箱活动 -->
            <div id="treasure-chests" v-if="globalData.type == '宝箱'">
                <van-image
                style="height: 100%;"
                fit="contain"
                src="__CDN__/assets/img/luckily/treasure-chests/cabg.png"
                ></van-image>
                <div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;">
                    <div class="ca-content">
                        <div class="dl">
                            <div class="dt center"></div>
                            <div class="dt center"></div>
                            <div class="dt center"></div>
                        </div>
                        <div class="dl">
                            <div class="dt center"></div>
                            <div class="dt center"></div>
                            <div class="dt center"></div>
                        </div>
                        <div class="dl">
                            <div class="dt center"></div>
                            <div class="dt center"></div>
                            <div class="dt center"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 转盘抽奖活动 -->
            <div id="large-turntable" v-if="globalData.type == '转盘'">
                <van-image
                style="height: 100%;"
                fit="contain"
                src="__CDN__/assets/img/luckily/large-turntable/default_bg.png"
                ></van-image>
                <div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;">
                    <div class="turntable_wrap">
                        <img
                        id="reward-bg"
                        style="height: 100%;z-index: 10;position: relative;"
                        fit="contain"
                        src="__CDN__/assets/img/luckily/large-turntable/reward_bg.png"
                        ></img>
                        <div id="countDown" class="circle">
                            <svg id="svg" class="bg" width="100%" height="100%">
                            </svg>
                        </div>
                        <div class="pointer"></div>
                    </div>
                    <div class="turntable_font">
                        <div class="turn_font_right">
                            <span>剩余次数:</span>
                            <font>{{luck_num}}</font>
                            <span>次</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 刮刮卡活动 -->
            <div id="scratch_card" v-if="globalData.type == '刮刮卡'">
                <van-image
                id="card-bg"
                v-if="globalData.bg_image"
                style="height: 100%;"
                :src="globalData.bg_image"
                ></van-image>
                <van-image
                id="card-bg"
                v-else
                style="height: 100%;"
                :src="__CDN__/assets/img/luckily/scratch_card/bj.jpg"
                ></van-image>
                <div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;">
                    <div class="main-view">
                        <div class="card">
                            <van-image
                            style="height: 100%;"
                            src="__CDN__/assets/img/luckily/scratch_card/card.png"
                            ></van-image>
                            <div id="card-content">
                                <div class="content-info">
                                    
                                </div>
                                <div id="award">
                                    <img src="__CDN__/assets/img/luckily/scratch_card/start.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="tip" >
                            <van-image
                            style="height: 100%;"
                            src="__CDN__/assets/img/luckily/scratch_card/num.png"
                            ></van-image>
                            <div class="txt">今日免费:<strong class="num">&nbsp;{{luck_num}}&nbsp;</strong>次</div>
                        </div>
                        <img id="fillImg" style="display: none;" src="__CDN__/assets/img/luckily/scratch_card/card1.png" alt="">
                    </div>
                </div>
            </div>
            <div
             v-if="['转盘'].indexOf(globalData.type) >= 0" 
             :style="{'width': '100%','flex':'1','margin':' 0 auto','background-color':{'砸金蛋':'#5d34ff','转盘':'#eb2a30'}[globalData.type]}">
                <!-- <div style="width: 100%;height: 100%;padding: 100%;padding: 10% 0;box-sizing: border-box;">
                    <div class="swiper-container" id="user-list" style="width: 83%;height:80%;border: 3px solid #f7f848;border-radius: 0px;background-color: #940000;">
                        <div class="swiper-wrapper">
                            <?php 
                                if(!empty($log)){
                            ?>
                                {foreach name="log" item="vo"}
                                <div class="swiper-slide swiper-no-swiping" style="height:auto;padding: 5px 0; display: flex;">
                                    <div style="flex: 1;text-align: center;">{$vo.user_name}</div>
                                    <div style="flex: 1;text-align: center;padding: 0 4px;">{$vo.product_name}</div>
                                    <div style="flex: 1;text-align: center;display: flex;flex-wrap: wrap;">{$vo.time}</div>
                                </div>
                                {/foreach}
                            <?php 
                                }else{
                            ?>
                                <div class="swiper-slide swiper-no-swiping" style="height:auto;padding: 5px 0; display: flex;">
                                    
                                </div>
                            <?php 
                                }
                            ?>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</body>
<style>
    body{
        background-color: #fff;
    }
    #music_image{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }
    #rule{
        font-size: 14px;
        width: 28px;
        text-align: center;
        color: #fff;
        background-color: #896ef4;
        position: fixed;
        top: 4%;
        right: 0;
        line-height: 1.3;
        padding: 6px;
        border-radius: 5px 0 0 5px;
        z-index: 10;
    }
    .swiper-container .swiper-wrapper{
        -webkit-transition-timing-function: linear; /*之前是ease-out*/
        -moz-transition-timing-function: linear;
        -ms-transition-timing-function: linear;
        -o-transition-timing-function: linear;
        transition-timing-function: linear;
    }
    /* 
        刮刮卡 start
    */
        #scratch_card{
            position: relative;
            overflow: auto;
            margin: 0 auto;
        }
        #scratch_card .main-view{
            height: 42.5%;
            position: absolute;
            bottom: 13%;
            left: 6.5%;
            right: 6.5%;
        }
        #scratch_card .main-view .card{
            height: 84%;
            position: relative
        }
        #scratch_card .main-view .card #card-content{
            position: absolute;
            width: 86%;
            height: 78%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            /* background-color: #cccccc; */
        }
        #scratch_card .main-view .card #card-content .content-info{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            line-height: 1.4;
        }
        #scratch_card .main-view .card #card-content .content-info .code{
            background-color:#9B0707 ;
            color: #fff;
            font-size: 14px;
            padding: 3px;
        }
        #scratch_card .main-view .card #card-content #award{
            position: absolute;
            z-index: 10;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #scratch_card .main-view .card #card-content #award>img{
            height: 20%;
        }
        #scratch_card .tip{
            height: 12%;
            margin: auto;
            text-align: center;
            margin-top: 1.5%;
            position: relative;
        }
        #scratch_card .tip .txt{
            position: absolute;
            width: 100%;
            top: 0;
            height: 100%;
            display: flex;
            line-height: 1;
            align-items: center;
            justify-content: center;
            color: #ffefc3;
            letter-spacing: 1px;
        }
    /* 
        刮刮卡 end
    */
    /* 
        大转盘 start
     */
        #large-turntable{
            position: relative;
            overflow: auto;
            margin: 0 auto;
        }
        #large-turntable .turntable_wrap{
            height: 60%;
            position: relative;
            overflow: hidden;
        }
        #large-turntable .turntable_font{
            margin: 6% 0;
        }
        #large-turntable .turntable_font .turn_font_right {
            background: #D50000;
            color: white;
            font-size: 14px;
            border-radius: 20px;
            padding:8px 15px;
            line-height: 1;
        }
        #large-turntable .turntable_wrap #countDown{
            background-color: #FFEEBE;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        #large-turntable .circle {
            box-sizing: content-box;
            border: 2px solid #ff9302;
            will-change: transform;
            /*animation: rotate 7s infinite linear;*/
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background: #ffffff;
            /* border: #d4002c 8px solid; */
            border-radius: 50%;
        }

        #large-turntable .section {
            position: absolute;
            color: #ffffff;
            font-size: 18px;
        }

        #large-turntable .s_text {
            color: #D81510;
            text-align: center;
            word-break: break-all;
            width: 90%;
            top: 0;
            bottom: 0;
            position: absolute;
            left: 0;
            right: 0;
            margin:auto;
            font-size: 4vw;
            transform: scale(0.8);
            font-weight: bold;
        }

        #large-turntable .line {
            /* background: #d60e37; */
            background-color: #ff9302;
            width: 1px;
            position: absolute;
        }

        #large-turntable .bg {
            position: absolute;
        }

        #large-turntable .path {
        }

        #large-turntable .pointer {
            position: absolute;
            width: auto;
            height: 42%;
            z-index: 100;
            overflow: hidden;
            display: block;
            cursor: pointer;
            margin: auto;
            left: 0 ;
            right: 0;
            top: -12% ;
            bottom: 0;
            background:  url('__CDN__/assets/img/luckily/large-turntable/task_draw_reward_pointer.png') no-repeat center/auto 100%;
        }

        #large-turntable .all {
            position: absolute;
            top: 20%;
            left: 40%;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        #large-turntable .tip {
            color: #000;
            font-size: 16px;
            position: absolute;
            left: 10%;
            top: 40%;
        }

        #large-turntable .reward_list {
            color: #666666;
            font-size: 15px;
            position: absolute;
            left: 10%;
            top: 50%;
        }
     /* 
        大转盘 end
     */
    /* 
        砸金蛋 start
    */
        #golden-egg .van-image__error, .van-image__img, .van-image__loading{
            display: inline-block;
        }
        #golden-egg{
            position: relative;
            overflow: auto;
            margin: 0 auto;
        }
        #golden-egg .user-list{
            height: 200px;
            background-color: #e91718;
            width: 100%;
            padding-bottom: 5%;
        }
        #golden-egg .main-view{
            height: 48.5%;
            position: absolute;
            bottom: 3%;
            left: 8.5%;
            right: 8.5%;
        }
        #golden-egg .main-view .tip{
            font-size: 14px;
            color: #740000;
            /* width: 31%; */
            background-color: #feff5c;
            margin: 0 auto;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            line-height: 1;
            height: 7%;
            top: -0.7%;
        }
        #golden-egg .main-view .egg-list{
            padding: 2% 0;
            height: 94%;
            display: flex;
            align-content: space-around;
            flex-wrap: wrap;
        }
        #golden-egg .main-view .egg-list .egg{
            width: 33.33%;
            height: 33.33%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
        }
        #golden-egg .main-view .egg-img{
            height: 90%;
            z-index: 10;
        }
        #golden-egg .main-view .ribbon{
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            position: absolute;
        }
        #golden-egg .main-view .ribbon img{
            position: absolute;
            height: 100%;
        }
        #golden-egg .main-view .ribbon .r3{
            height: 80%;
            display: none;
            transform: rotate(-35deg);
            top: -25%;
            left: 15%;
        }
        #golden-egg .main-view .hammer{
            position: absolute;
            top: -20%;
            right: -20%;
            height: 60%;
            z-index: 10;
            display: none;
        }
        #golden-egg .main-view .egg-curr .ribbon .r3{
            display: block;
        }
        #golden-egg .main-view .hammer-active{
            display: block;
            animation:egg-move 1s 1 ;
        }
        @keyframes egg-move{
            20%{transform: rotate(5deg)}
            50%{top:-8%;right:-10%;transform: rotate(5deg)}    
            55%{top:-8%;right:-10%;transform: rotate(-55deg)}
            /* 90%{top:-21%;right:-42%;} */
            100%{transform: rotate(0deg)}
        }
        #golden-egg .main-view .egg-list .egg-zy .img1{
            animation:zy 2.5s 1 ;
        }
        @keyframes zy{
            10% {
                transform: scale(0.8) rotate(15deg);
            }
            20% {
                transform: scale(1.4) rotate(-10deg);
            }
            30% {
                transform: scale(1.4) rotate(5deg);
            }
            40% {
                transform: scale(1.4) rotate(-5deg);
            }
            50%,100% {
                transform: scale(1) rotate(0deg);
            }
        }
     /* 
        砸金蛋 end
     */
     /* 
        宝箱活动 start
     */
        #treasure-chests{
            /* background-color: ; */
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        #treasure-chests .ca-content {
            width: 90%;
            margin: 55% auto 0;
            height: 48.5%;
            padding: 10px 0;
            position: relative;
        }
        #treasure-chests .ca-content .dl {
            width: 100%;
            margin: 0.35rem 0rem;
            display: flex;
            height: 33%;
            align-items: center;
        }
        #treasure-chests .ca-content .dt {
            flex: 1;
            height: 100%;
            text-align: center;
            background: url('__CDN__/assets/img/luckily/treasure-chests/caclose.png') no-repeat center/92%;
        }
        #treasure-chests .ca-content .center{
            /* position: absolute;
            width: 33%;
            left: 50%;
            top: 50%; */
        }
        #treasure-chests .caseopen{animation: mymove 300ms linear 3;}
        #treasure-chests .caseopen-end{
            background: url('__CDN__/assets/img/luckily/treasure-chests/caopen.png') no-repeat center/92% !important;
        }
        @keyframes mymove{
            50%{transform: rotate(-15deg) scale(1.04);}
            100%{transform: rotate(15deg) scale(0.97);}
        }
        @keyframes mymove{
            50%{transform: rotate(-15deg) scale(1.04);}
            100%{transform: rotate(15deg) scale(0.97);}
        }
        @keyframes mymove{
            50%{transform: rotate(-15deg) scale(1.04);}
            100%{transform: rotate(15deg) scale(0.97);}
        }
     /* 
        宝箱活动 end
     */
</style>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    var require = {
        config: {
            "site":{"name":"\u4f73\u5bb6\u8bda\u54c1","cdnurl":"","version":Date.parse(new Date()),"timezone":"Asia\/Shanghai","languages":{"backend":"zh-cn","frontend":"zh-cn"}},
            "upload":{"cdnurl":"","uploadurl":"\/index\/ajax\/upload","bucket":"local","maxsize":"10mb","mimetype":"jpg,png,bmp,jpeg,gif,zip,rar,xls,xlsx,wav,mp4,mp3,pdf","chunking":false,"chunksize":2097152,"savekey":"\/uploads\/{year}{mon}{day}\/{filemd5}{.suffix}","multipart":[],"multiple":false,"storage":"local"},
            "modulename":"luck_draw",
            "controllername":"share",
            "actionname":"luck_draw",
            "jsname":"frontend\/share", 
            "moduleurl":"\/index",
            "language":"zh-cn",
            "token":"c0f4e22a-8882-4c1b-a7d3-21a5805a1d94",
            "__PUBLIC__":"\/","__ROOT__":"\/","__CDN__":""}    
    };
    var globalData=eval(<?php echo json_encode($msg);?>);
    /*
     * 注意：
     * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
     * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
     * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     *
     * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
     * 邮箱地址：weixin-open@qq.com
     * 邮件主题：【微信JS-SDK反馈】具体问题
     * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
     */
    //这里使用wx调用config接口，填写配置项
    wx.config({
        debug: false,
        appId:'{$signPackage.appId}' ,
        timestamp:'{$signPackage.timestamp}',
        nonceStr:'{$signPackage.nonceStr}' ,
        signature: '{$signPackage.signature}',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ],success: function(res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });
    wx.ready(function(){
        wx.onMenuShareTimeline({
            title: '{$msg.title}', // 分享标题
            desc: '{$msg.desc}', // 分享描述
            link: '{$msg.link}', // 分享链接
            imgUrl: '{$msg.image}', // 分享图标
            success: function () {
                //设置成功
            }
        });
        wx.onMenuShareAppMessage({
            title: '{$msg.title}', // 分享标题
            desc: '{$msg.desc}', // 分享描述
            link: '{$msg.link2}', // 分享链接
            imgUrl: '{$msg.image}', // 分享图标
            success: function () {
                //设置成功
            }
        });
    })
</script>
<script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1627711211"></script>
<script>
    function playPause() {
        var music = document.getElementById('music');
        var music_btn = document.getElementById('music_btn');
        if (music.paused){
            music.play();
            music_btn.src = '__CDN__/assets/img/luckily/music.png'; //播放图片
        }
        else {
            music.pause();
            music_btn.src = '__CDN__/assets/img/luckily/music_stop.png'; //暂停图片
        }
    }
</script>
</html>